<template>
  <div class="admin-panel" :class="{ 'mobile-layout': isMobileDevice }">
    <div class="admin-container">
      <!-- 移动端标题 -->
      <div v-if="isMobileDevice" class="mobile-header">
        <div class="mobile-header-content">
          <div class="header-top">
            <el-button 
              type="text" 
              @click="goToHome" 
              class="back-home-btn"
              :icon="ArrowLeft"
            >
              返回主页
            </el-button>
            <div class="header-space"></div>
          </div>
          <div class="header-main">
            <h1>管理员控制面板</h1>
            <p>系统管理功能</p>
          </div>
        </div>
      </div>

      <el-card class="admin-card" :class="{ 'mobile-card': isMobileDevice }">
        <template #header v-if="!isMobileDevice">
          <div class="desktop-header">
            <div class="header-back">
              <el-button type="text" @click="goToHome" class="back-btn">
                <el-icon><ArrowLeft /></el-icon>
                返回主页
              </el-button>
            </div>
            <div class="header-content">
              <h2>管理员控制面板</h2>
              <p>系统管理功能</p>
            </div>
            <div class="header-space"></div>
          </div>
        </template>

        <div v-if="isMobileDevice" class="mobile-form-header">
          <h3>系统管理</h3>
        </div>

        <el-tabs v-model="activeTab" class="admin-tabs">
          <!-- 邀请码管理 -->
          <el-tab-pane label="邀请码管理" name="invite">
            <div class="tab-content">
              <div class="section-header">
                <h3>邀请码管理</h3>
                <div class="header-actions">
                  <el-button type="success" @click="showGenerateDialog = true" :loading="generating">
                    生成邀请码
                  </el-button>
                  <el-button type="warning" @click="cleanupExpiredCodes" :loading="cleaning">
                    清理过期
                  </el-button>
                </div>
              </div>

              <!-- 邀请码统计 -->
              <div v-if="inviteStats" class="stats-section">
                <div class="stats-grid" :class="{ 'mobile-stats': isMobileDevice }">
                  <div class="stat-card">
                    <div class="stat-content">
                      <div class="stat-icon total">📊</div>
                      <div class="stat-number">{{ inviteStats.total_codes || 0 }}</div>
                      <div class="stat-label">总邀请码</div>
                    </div>
                  </div>
                  <div class="stat-card">
                    <div class="stat-content">
                      <div class="stat-icon used">✅</div>
                      <div class="stat-number">{{ inviteStats.used_codes || 0 }}</div>
                      <div class="stat-label">已使用</div>
                    </div>
                  </div>
                  <div class="stat-card">
                    <div class="stat-content">
                      <div class="stat-icon available">🆕</div>
                      <div class="stat-number">{{ inviteStats.available_codes || 0 }}</div>
                      <div class="stat-label">可用</div>
                    </div>
                  </div>
                  <div class="stat-card">
                    <div class="stat-content">
                      <div class="stat-icon expired">⏰</div>
                      <div class="stat-number">{{ inviteStats.expired_codes || 0 }}</div>
                      <div class="stat-label">已过期</div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 桌面端表格 -->
              <el-table 
                v-if="!isMobileDevice"
                :data="inviteCodes" 
                style="width: 100%" 
                v-loading="loadingInviteCodes"
              >
                <el-table-column prop="code" label="邀请码" width="120" />
                <el-table-column prop="creator_name" label="创建者" width="100" />
                <el-table-column prop="user_name" label="使用者" width="100" />
                <el-table-column prop="is_used" label="状态" width="80">
                  <template #default="scope">
                    <el-tag :type="scope.row.is_used ? 'success' : 'warning'">
                      {{ scope.row.is_used ? '已使用' : '未使用' }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="created_at" label="创建时间" width="150" />
                <el-table-column prop="used_at" label="使用时间" width="150" />
              </el-table>

              <!-- 移动端卡片列表 -->
              <div v-else class="mobile-invite-list" v-loading="loadingInviteCodes">
                <div 
                  v-for="code in inviteCodes" 
                  :key="code.id"
                  class="invite-code-card"
                >
                  <div class="code-header">
                    <div class="code-info">
                      <div class="code-value">{{ code.code }}</div>
                      <div class="code-meta">
                        <span class="creator">创建者: {{ code.creator_name }}</span>
                        <span v-if="code.user_name" class="user">使用者: {{ code.user_name }}</span>
                      </div>
                    </div>
                    <el-tag 
                      :type="code.is_used ? 'success' : 'warning'" 
                      size="small"
                    >
                      {{ code.is_used ? '已使用' : '未使用' }}
                    </el-tag>
                  </div>
                  <div class="code-dates">
                    <div class="date-item">
                      <span class="date-label">创建时间:</span>
                      <span class="date-value">{{ formatTime(code.created_at) }}</span>
                    </div>
                    <div v-if="code.used_at" class="date-item">
                      <span class="date-label">使用时间:</span>
                      <span class="date-value">{{ formatTime(code.used_at) }}</span>
                    </div>
                  </div>
                </div>
                
                <div v-if="inviteCodes.length === 0 && !loadingInviteCodes" class="empty-state">
                  <el-empty description="暂无邀请码" />
                </div>
              </div>
            </div>
          </el-tab-pane>

          <!-- 用户管理 -->
          <el-tab-pane label="用户管理" name="users">
            <div class="tab-content">
              <div class="section-header">
                <h3>用户管理</h3>
              </div>

              <!-- 桌面端用户表格 -->
              <el-table 
                v-if="!isMobileDevice"
                :data="users" 
                style="width: 100%" 
                v-loading="loadingUsers"
              >
                <el-table-column prop="username" label="用户名" width="120" />
                <el-table-column prop="email" label="邮箱" width="200" />
                <el-table-column prop="is_admin" label="管理员" width="80">
                  <template #default="scope">
                    <el-tag :type="scope.row.is_admin ? 'danger' : 'info'">
                      {{ scope.row.is_admin ? '是' : '否' }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="can_invite" label="可邀请" width="80">
                  <template #default="scope">
                    <el-tag :type="scope.row.can_invite ? 'success' : 'info'">
                      {{ scope.row.can_invite ? '是' : '否' }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="created_at" label="注册时间" width="150" />
                <el-table-column label="操作" width="200">
                  <template #default="scope">
                    <el-button 
                      size="small" 
                      @click="editUserPermissions(scope.row)"
                      :disabled="scope.row.id === currentUser.id"
                    >
                      编辑权限
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>

              <!-- 移动端用户列表 -->
              <div v-else class="mobile-user-list" v-loading="loadingUsers">
                <div 
                  v-for="user in users" 
                  :key="user.id"
                  class="user-card"
                >
                  <div class="user-header">
                    <div class="user-info">
                      <div class="username">{{ user.username }}</div>
                      <div class="user-email">{{ user.email || '未设置邮箱' }}</div>
                    </div>
                    <div class="user-badges">
                      <el-tag 
                        :type="user.is_admin ? 'danger' : 'info'" 
                        size="small"
                      >
                        {{ user.is_admin ? '管理员' : '普通用户' }}
                      </el-tag>
                      <el-tag 
                        :type="user.can_invite ? 'success' : 'info'" 
                        size="small"
                      >
                        {{ user.can_invite ? '可邀请' : '不可邀请' }}
                      </el-tag>
                    </div>
                  </div>
                  <div class="user-details">
                    <div class="detail-item">
                      <span class="detail-label">注册时间:</span>
                      <span class="detail-value">{{ formatTime(user.created_at) }}</span>
                    </div>
                  </div>
                  <div class="user-actions">
                    <el-button 
                      size="small" 
                      @click="editUserPermissions(user)"
                      :disabled="user.id === currentUser.id"
                      type="primary"
                    >
                      编辑权限
                    </el-button>
                  </div>
                </div>
                
                <div v-if="users.length === 0 && !loadingUsers" class="empty-state">
                  <el-empty description="暂无用户" />
                </div>
              </div>
            </div>
          </el-tab-pane>

          <!-- 系统设置 -->
          <el-tab-pane label="系统设置" name="system">
            <div class="tab-content">
              <div class="section-header">
                <h3>系统设置</h3>
              </div>

              <div class="system-settings">
                <el-card class="setting-card">
                  <template #header>
                    <h4>邀请权限设置</h4>
                  </template>
                  
                  <div class="setting-item">
                    <div class="setting-label">
                      <span>允许所有用户邀请新用户</span>
                      <p class="setting-desc">开启后，所有用户都可以生成邀请码邀请新用户注册</p>
                    </div>
                    <el-switch 
                      v-model="systemConfig.allowAllInvite" 
                      @change="toggleAllowAllInvite"
                      :loading="updatingSystemConfig"
                    />
                  </div>
                </el-card>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>

    <!-- 用户权限编辑对话框 -->
    <el-dialog v-model="userPermissionDialog" title="编辑用户权限" width="400px">
      <el-form :model="editingUser" label-width="100px">
        <el-form-item label="用户名">
          <el-input v-model="editingUser.username" disabled />
        </el-form-item>
        <el-form-item label="管理员">
          <el-switch v-model="editingUser.is_admin" />
        </el-form-item>
        <el-form-item label="可邀请">
          <el-switch v-model="editingUser.can_invite" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="userPermissionDialog = false">取消</el-button>
        <el-button type="primary" @click="saveUserPermissions" :loading="savingPermissions">
          保存
        </el-button>
      </template>
    </el-dialog>

    <!-- 邀请码生成对话框 -->
    <el-dialog 
      v-model="showGenerateDialog" 
      title="生成邀请码" 
      width="500px"
      @close="resetGenerateForm"
    >
      <el-form :model="generateForm" label-width="100px">
        <el-form-item label="生成数量">
          <el-input-number 
            v-model="generateForm.count" 
            :min="1" 
            :max="10" 
            style="width: 100%"
          />
        </el-form-item>
        
        <el-form-item label="有效期（天）">
          <el-input-number 
            v-model="generateForm.expiresInDays" 
            :min="1" 
            :max="365" 
            style="width: 100%"
            placeholder="留空表示永不过期"
          />
        </el-form-item>
        
        <el-form-item label="使用次数">
          <el-input-number 
            v-model="generateForm.maxUses" 
            :min="1" 
            :max="100" 
            style="width: 100%"
          />
        </el-form-item>
        
        <el-form-item label="邀请码类型">
          <el-select v-model="generateForm.inviteType" style="width: 100%">
            <el-option label="普通邀请" value="INVITE" />
            <el-option label="管理员邀请" value="ADMIN" />
            <el-option label="特殊邀请" value="SPECIAL" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="描述">
          <el-input 
            v-model="generateForm.description" 
            placeholder="可选，用于标识邀请码用途"
            maxlength="100"
            show-word-limit
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="showGenerateDialog = false">取消</el-button>
        <el-button type="primary" @click="handleGenerateInviteCode" :loading="generating">
          生成邀请码
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ArrowLeft } from '@element-plus/icons-vue'
import { 
  generateInviteCode as apiGenerateInviteCode,
  getInviteCodes,
  getUsers,
  updateUserPermissions,
  toggleAllowAllInvite as apiToggleAllowAllInvite,
  getSystemConfig,
  getInviteStats,
  deleteInviteCodesBatch,
  cleanupExpiredInviteCodes
} from '@/api/auth'
import { useUserStore } from '@/stores/user'

const router = useRouter()
const userStore = useUserStore()

// 返回主页
const goToHome = () => {
  router.push('/traffic-monitor')
}

// 格式化时间
const formatTime = (timeString) => {
  if (!timeString) return '-'
  const date = new Date(timeString)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 移动端检测
const isMobileDevice = computed(() => {
  return window.innerWidth <= 768 || document.body.classList.contains('mobile-device')
})

// 当前用户
const currentUser = computed(() => userStore.user)

// 活动标签页
const activeTab = ref('invite')

// 邀请码相关
const inviteCodes = ref([])
const loadingInviteCodes = ref(false)
const generating = ref(false)
const cleaning = ref(false)
const inviteStats = ref(null)
const showGenerateDialog = ref(false)
const generateForm = reactive({
  count: 1,
  expiresInDays: null,
  maxUses: 1,
  inviteType: 'INVITE',
  description: ''
})

// 用户相关
const users = ref([])
const loadingUsers = ref(false)
const userPermissionDialog = ref(false)
const editingUser = ref({})
const savingPermissions = ref(false)

// 系统配置
const systemConfig = reactive({
  allowAllInvite: false
})
const updatingSystemConfig = ref(false)

// 生成邀请码
const handleGenerateInviteCode = async () => {
  try {
    generating.value = true
    
    const requestData = {
      count: generateForm.count,
      maxUses: generateForm.maxUses,
      inviteType: generateForm.inviteType
    }
    
    if (generateForm.expiresInDays) {
      requestData.expiresInDays = generateForm.expiresInDays
    }
    
    if (generateForm.description) {
      requestData.description = generateForm.description
    }
    
    const response = await apiGenerateInviteCode(requestData)
    
    ElMessage.success(`成功生成${response.count}个邀请码`)
    
    // 显示生成的邀请码
    const codesText = response.inviteCodes.join('\n')
    ElMessageBox.alert(
      `生成的邀请码：\n${codesText}`,
      '邀请码生成成功',
      {
        confirmButtonText: '确定',
        type: 'success'
      }
    )
    
    showGenerateDialog.value = false
    resetGenerateForm()
    
    // 刷新数据
    await Promise.all([
      loadInviteCodes(),
      loadInviteStats()
    ])
  } catch (error) {
    console.error('生成邀请码失败:', error)
    ElMessage.error(error.response?.data?.message || '生成邀请码失败')
  } finally {
    generating.value = false
  }
}

// 重置生成表单
const resetGenerateForm = () => {
  generateForm.count = 1
  generateForm.expiresInDays = null
  generateForm.maxUses = 1
  generateForm.inviteType = 'INVITE'
  generateForm.description = ''
}

// 加载邀请码列表
const loadInviteCodes = async () => {
  try {
    loadingInviteCodes.value = true
    const response = await getInviteCodes()
    inviteCodes.value = response.inviteCodes
  } catch (error) {
    console.error('加载邀请码列表失败:', error)
    ElMessage.error('加载邀请码列表失败')
  } finally {
    loadingInviteCodes.value = false
  }
}

// 加载用户列表
const loadUsers = async () => {
  try {
    loadingUsers.value = true
    const response = await getUsers()
    users.value = response.users
  } catch (error) {
    console.error('加载用户列表失败:', error)
    ElMessage.error('加载用户列表失败')
  } finally {
    loadingUsers.value = false
  }
}

// 编辑用户权限
const editUserPermissions = (user) => {
  editingUser.value = { ...user }
  userPermissionDialog.value = true
}

// 保存用户权限
const saveUserPermissions = async () => {
  try {
    savingPermissions.value = true
    await updateUserPermissions(editingUser.value.id, {
      isAdmin: editingUser.value.is_admin,
      canInvite: editingUser.value.can_invite
    })
    
    ElMessage.success('用户权限更新成功')
    userPermissionDialog.value = false
    
    // 刷新用户列表
    await loadUsers()
  } catch (error) {
    console.error('更新用户权限失败:', error)
    ElMessage.error(error.response?.data?.message || '更新用户权限失败')
  } finally {
    savingPermissions.value = false
  }
}

// 切换全局邀请权限
const toggleAllowAllInvite = async () => {
  try {
    updatingSystemConfig.value = true
    await apiToggleAllowAllInvite(systemConfig.allowAllInvite)
    
    ElMessage.success(
      systemConfig.allowAllInvite ? '已开启全局邀请权限' : '已关闭全局邀请权限'
    )
  } catch (error) {
    console.error('切换全局邀请权限失败:', error)
    ElMessage.error(error.response?.data?.message || '切换全局邀请权限失败')
    // 恢复原状态
    systemConfig.allowAllInvite = !systemConfig.allowAllInvite
  } finally {
    updatingSystemConfig.value = false
  }
}

// 加载系统配置
const loadSystemConfig = async () => {
  try {
    const response = await getSystemConfig()
    systemConfig.allowAllInvite = response.config.allowAllInvite
  } catch (error) {
    console.error('加载系统配置失败:', error)
  }
}

// 加载邀请码统计信息
const loadInviteStats = async () => {
  try {
    const response = await getInviteStats()
    inviteStats.value = response.stats
  } catch (error) {
    console.error('加载邀请码统计失败:', error)
  }
}

// 清理过期邀请码
const cleanupExpiredCodes = async () => {
  try {
    await ElMessageBox.confirm(
      '确定要清理所有过期的邀请码吗？此操作不可撤销。',
      '确认清理',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    cleaning.value = true
    const response = await cleanupExpiredInviteCodes()
    
    ElMessage.success(`成功清理${response.cleanedCount}个过期邀请码`)
    
    // 刷新数据
    await Promise.all([
      loadInviteCodes(),
      loadInviteStats()
    ])
  } catch (error) {
    if (error !== 'cancel') {
      console.error('清理过期邀请码失败:', error)
      ElMessage.error(error.response?.data?.message || '清理过期邀请码失败')
    }
  } finally {
    cleaning.value = false
  }
}

// 页面加载时初始化数据
onMounted(async () => {
  // 检查管理员权限
  if (!currentUser.value?.isAdmin) {
    ElMessage.error('您没有管理员权限')
    router.push('/')
    return
  }
  
  await Promise.all([
    loadInviteCodes(),
    loadUsers(),
    loadSystemConfig(),
    loadInviteStats()
  ])
})
</script>

<style scoped>
.admin-panel {
  min-height: 100vh;
  background: #f5f7fa;
  padding: 20px;
}

.admin-panel.mobile-layout {
  padding: 0;
  background: #f8f9fa;
}

.admin-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* 移动端标题 */
.mobile-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 0 0 24px 24px;
  margin-bottom: 20px;
  overflow: hidden;
}

.mobile-header-content {
  padding: 20px;
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.back-home-btn {
  color: white !important;
  font-size: 14px;
  padding: 8px 12px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
}

.back-home-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.header-space {
  flex: 1;
}

.header-main {
  text-align: center;
}

.header-main h1 {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
  color: white;
}

.header-main p {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

/* 桌面端头部 */
.desktop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.header-back {
  flex-shrink: 0;
}

.back-btn {
  color: #409EFF !important;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.back-btn:hover {
  background: #f0f9ff;
  transform: translateX(-2px);
}

.header-content {
  flex: 1;
  text-align: center;
}

.header-content h2 {
  margin: 0 0 8px 0;
  color: #2c3e50;
  font-size: 20px;
}

.header-content p {
  margin: 0;
  color: #6c757d;
  font-size: 14px;
}

.header-space {
  flex-shrink: 0;
  width: 120px;
}

/* 管理员卡片 */
.admin-card {
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.admin-card.mobile-card {
  margin: 0 16px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.admin-card :deep(.el-card__header) {
  background: #f8f9fa;
  border-radius: 8px 8px 0 0;
  padding: 20px;
}

/* 移动端表单头部 */
.mobile-form-header {
  text-align: center;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
  margin-bottom: 24px;
}

.mobile-form-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

/* 标签页样式 */
.admin-tabs {
  margin-top: 20px;
}

.tab-content {
  padding: 20px 0;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h3 {
  margin: 0;
  color: #2c3e50;
  font-size: 18px;
}

.header-actions {
  display: flex;
  gap: 12px;
}

/* 统计卡片样式 */
.stats-section {
  margin-bottom: 24px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.stats-grid.mobile-stats {
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border: 1px solid #f0f0f0;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.stat-content {
  padding: 20px 16px;
  text-align: center;
}

.stat-icon {
  font-size: 24px;
  margin-bottom: 8px;
  display: block;
}

.stat-icon.total {
  color: #409EFF;
}

.stat-icon.used {
  color: #67C23A;
}

.stat-icon.available {
  color: #E6A23C;
}

.stat-icon.expired {
  color: #F56C6C;
}

.stat-number {
  font-size: 28px;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 4px;
  display: block;
}

.stat-label {
  font-size: 12px;
  color: #6c757d;
  font-weight: 500;
}



/* 系统设置样式 */
.system-settings {
  max-width: 600px;
}

.setting-card {
  margin-bottom: 20px;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid #f0f0f0;
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-label {
  flex: 1;
  margin-right: 20px;
}

.setting-label span {
  font-weight: 500;
  color: #2c3e50;
  display: block;
  margin-bottom: 4px;
}

.setting-desc {
  font-size: 12px;
  color: #6c757d;
  margin: 0;
  line-height: 1.4;
}

/* 移动端邀请码列表 */
.mobile-invite-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.invite-code-card {
  background: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #f0f0f0;
  transition: all 0.3s ease;
}

.invite-code-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

.code-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.code-info {
  flex: 1;
}

.code-value {
  font-family: 'Courier New', monospace;
  font-weight: bold;
  font-size: 16px;
  color: #2c3e50;
  background: #f0f9ff;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #b3d8ff;
  margin-bottom: 8px;
  display: inline-block;
}

.code-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.creator, .user {
  font-size: 12px;
  color: #6c757d;
}

.code-dates {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

.date-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.date-label {
  font-size: 12px;
  color: #6c757d;
  font-weight: 500;
}

.date-value {
  font-size: 12px;
  color: #2c3e50;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
}

/* 移动端用户列表 */
.mobile-user-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.user-card {
  background: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #f0f0f0;
  transition: all 0.3s ease;
}

.user-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

.user-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.user-info {
  flex: 1;
}

.username {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 4px;
}

.user-email {
  font-size: 12px;
  color: #6c757d;
}

.user-badges {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}

.user-details {
  margin-bottom: 12px;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.detail-label {
  font-size: 12px;
  color: #6c757d;
  font-weight: 500;
}

.detail-value {
  font-size: 12px;
  color: #2c3e50;
}

.user-actions {
  display: flex;
  justify-content: flex-end;
}

/* 移动端优化 */
@media (max-width: 768px) {
  .admin-panel.mobile-layout {
    padding: 0;
  }
  
  .mobile-header-content {
    padding: 16px;
  }
  
  .header-main h1 {
    font-size: 20px;
  }
  
  .admin-card.mobile-card {
    margin: 0 12px;
  }
  
  .mobile-form-header h3 {
    font-size: 16px;
  }
  
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .setting-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .setting-label {
    margin-right: 0;
  }
  
  .stats-grid.mobile-stats {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .stat-content {
    padding: 16px 12px;
  }
  
  .stat-number {
    font-size: 24px;
  }
}

/* 表格响应式 */
@media (max-width: 768px) {
  .el-table {
    font-size: 12px;
  }
  
  .el-table .el-table__cell {
    padding: 8px 4px;
  }
}
</style>
